<template>
  <div>
    <common-head title="所有分类"/>
    <div class="wrap">
      <div class="cates">
        <div class="cate-wrap">
          <div :class="['cate', {
            active: index === num
          }]"
          v-for="(cate, index) in cates"
          :key="cate.id"
          @click="switchCate(index)"
          >{{cate.name}}</div>
        </div>
      </div>
      <div class="items-wrap">
            <div class="items">
      <div class="item"
         v-for="item in items" :key="item.id"
          @click="clickItem(item.id)"
      >
        <div class="item-left">
          <img :src="item.pic" alt="">
        </div>
        <div class="item-right">
          <h4 class="name">{{item.name}}</h4>
          <p class="desc">
            {{ item.characteristic ? item.characteristic :'暂无描述' }}
          </p>
          <div class="action">
            <span class="price">
              ￥ {{item.minPrice}}
            </span>
            <van-icon @click.stop="addCart(item)" color="#f66" size="24" class-prefix="icon" name="jia-tianchong
"/>
          </div>
        </div>
      </div>
    </div>
      </div>
    </div>
    <my-tabbar/>
  </div>
</template>

<script>
import MyTabbar from '@components/MyTabbar'
import CommonHead from '../../components/CommonHead.vue'
import { fetchCates, fetchItems } from '@api'
export default {
  data () {
    return {
      num: 0, // 控制切换分类状态
      cates: [],
      items: []
    }
  },
  created () {
    this.fetchCates()
  },
  methods: {
    /* async fetchItems () {
      const res = await fetchItems({
        categoryId: this.cates[this.num].id
      })
      if (res.data.code === 0) {
        this.cates = res.data.data
      }
    }, */
    fetchItems () {
      this.items = []
      fetchItems({
        categoryId: this.cates[this.num].id
      }).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.data
        }
      })
    },
    switchCate (index) {
      this.num = index
      this.fetchItems()
    },
    fetchCates () {
      // 请求所有分类
      fetchCates().then(res => {
        if (res.data.code === 0) {
          this.cates = res.data.data
          this.fetchItems()
        }
      })
    }
  },
  components: {
    MyTabbar,
    CommonHead
  }
}
</script>
<style lang="scss" scoped>
.wrap{
  position: fixed;
  left: 0;
  right: 0;
  top: 46px;
  bottom: 50px;
  background-color: rgb(246, 242, 242);
  display: flex;
  .cates{
    width: 120px;
    height: 100%;
    border-right: 1px solid #666;
    .cate{
      line-height: 50px;
      text-align: center;
      color:#333;
      background-color: #f7f8fa;
      font-weight: 700;
      font-size: 14px;
      &.active{
        border-left: 4px solid red;
        background-color: #fff;
      }
    }
  }
  .items-wrap{
    flex:1;
    height: 100%;
    overflow: auto;
    .item{
  height: 180px;
  display: flex;
  align-items: center;
  &-left{
    height: 150px;
    img{
      width: 150px;
      height: 150px;

    }
  }
  &-right{
    flex:1;
    height: 150px;
    padding:0 10px;
    box-sizing: border-box;
    .name{
      font-weight: 100;
      font-size: 16px;
      line-height: 40px;
      color:#333;
    }
    .desc{
      line-height: 36px;
      font-size: 14px;
      color: #666;
    }
    .action{
      display: flex;
      justify-content: space-between;
      padding-right: 20px;
      box-sizing: border-box;
      align-items: center;
      .price{
        color: #ff2222;

      }
    }
  }
}
  }
}
</style>
